import React, { useEffect, useMemo, useState } from 'react'
import '../App.css'
import { SideBar } from 'antd-mobile'
import { Dropdown } from 'antd-mobile'
import axios from 'axios'
import { Card } from '@nutui/nutui-react'
import { InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom' 

export default function Home() {
    const [parentlist, setParentlist] = useState([])
    const [childlist, setChildlist] = useState([])
    const [active, setActive] = useState(0)
    const [dianlist, setDianlist] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const [page, setPage] = useState(5)
    const [sort, setSort] = useState('默认排序')
    const nav = useNavigate()
    const getparentlist = async () => {
        const res = await axios.get('http://localhost:3000/get_diancate')
        setParentlist(res.data)
    }
    const Childshow = async (e) => {
        if (e == 1) {
            const res = await axios.get('http://localhost:3000/get_diancateChildall')
            setChildlist(res.data)
        } else {
            const res = await axios.get('http://localhost:3000/get_diancateChild', {
                params: { id: e }
            })
            setChildlist(res.data)
        }

    }
    const getdianlist = async () => {
        if (sort == '默认排序') {
            const res = await axios.get('http://localhost:3000/show_dian', {
                params: { page }
            })
            setDianlist(res.data)
        }else if(sort == '离我最近'){
            const res = await axios.get('http://localhost:3000/show_dian', {
                params: { page }
            })
            const sortlist = res.data.sort((a,b)=>{return a.juli - b.juli})
            setDianlist(sortlist)
        }

    }
    const loadMore = () => {
        setTimeout(() => {
            setPage(page + 2)
            setHasMore(page < 5 || page > 11 ? false : true)
        }, 1000)
    }
    const changepu =async(id)=>{
        console.log(id);
        const res = await axios.get('http://localhost:3000/show_dianByCate',{
            params:{
                cate:id
            }
        })
        setDianlist(res.data)
    }
    useEffect(() => {
        getparentlist()
        getdianlist()
    }, [page])
    return (
        <div>
            <div className='container'>
                <h2>美团点餐</h2>
            </div>
            <div>
                <Dropdown>
                    <Dropdown.Item key='sorter' title='默认排序'>
                        <div style={{ padding: 12 }}>
                            <p onClick={() => {
                                setSort('默认排序')
                            }}>默认排序</p>
                            <p onClick={() => {
                                setSort('离我最近')
                            }}>离我最近</p>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='bizop' title='全部美食'>
                        <div style={{ padding: 12, display: 'flex' }}>
                            <SideBar activeKey={active} onChange={(e) => {
                                setActive(e)
                                Childshow(e)
                            }}>
                                <SideBar.Item key={1} title={'全部美食'} />
                                {parentlist &&
                                    parentlist.map(item => {
                                        return (
                                            <SideBar.Item key={item._id} title={item.name} />
                                        )
                                    }
                                    )
                                }
                            </SideBar>
                            <div style={{ marginLeft: '12px' }}>
                                {
                                    childlist && childlist.map(item => {
                                        return <ul key={item._id}>
                                            <li onClick={()=>{
                                                changepu(item._id)
                                            }}>{item.name}</li>
                                        </ul>
                                    })
                                }
                            </div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='more' title='筛选'>
                        <div style={{ padding: 12 }}>
                            更多筛选内容
                            <br />
                            更多筛选内容
                            <br />
                        </div>
                    </Dropdown.Item>
                </Dropdown>
            </div>
            <div>
                {
                    dianlist && dianlist.map(item => {
                        return <div key={item._id}>
                            <Card
                                src={item.img}
                                title={item.name}
                                // price={state.price}
                                // vipPrice={state.vipPrice}
                                // shopDescription={state.shopDescription}
                                // delivery={state.delivery}
                                // shopName={state.shopName}
                                extra={<div style={{ fontSize: '12px' }}><span>{item.juli}</span></div>}
                             onClick={()=>{
                                nav('/xiang',{state:item._id})
                             }}/>

                        </div>
                    })
                }
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    )
}
